@const CHROME-TEXT: #ddd;
@const MENU-TEXT: #ddd;
@const MENU-HILITE-BACK: #000;
@const MENU-HILITE-TEXT: #fff;

@import url(menu.css);

@font-face 
{
  font-family: FontAwesome;
  src: url(../fonts/fontawesome-webfont.ttf);
}

html /* the whole window */
{
  background: transparent; 
  font:system;
  color: #ddd;
}

body { margin:0; padding:0; }

header#window { flow: horizontal; font:system; border-spacing: 4dip; padding:4dip; background: #47484B; }
header#window > caption { width:*; text-align:center; }
header#window > chrome-button { 
  behavior:clickable; 
  display:inline-block; 
  size: 14dip; 
  border-radius:50%;
  margin:* 0;
}
header#window > chrome-button.min { background-color:#ffea00; }
header#window > chrome-button.max { background-color:#0ee601; }
header#window > chrome-button.close { background-color:#ff4b00; }
header#window > chrome-button:hover { /*background-color:@MENU-HILITE-BACK; color:@MENU-HILITE-TEXT;*/ }

@media platform == "OSX" {
  header#window { flow: grid(5 3 4 1 2); }
}

menubar {
  display:block;
  line-height: 1.6em;
  background: #47484B;
  width:max-content;
}

main {
  size:*;           /*spans all available space */
  flow: horizontal; /* frameset && side bar */
}

main > toolbar#sidebar 
{
  flow:vertical;
  height:*;
  width:32dip;
  //background:#5D5F60;
  background:transparent;
}

main > toolbar#sidebar > button {
  width:*;
  color:#bbb; 
  font-family: FontAwesome;
  font-size: 17dip;
  line-height: 28dip;
  text-align:center;
}

#content > toolbar {
  flow:horizontal;
  height:32dip;
}

widget#tree { 
  font:system;
  //background: linear-gradient(top, #5D5F60,#47484B);
  background: transparent;
  border:none;
  size:*;
  prototype: VirtualTree url(../widgets/virtual-tree.tis); 
  overflow-y: scroll-indicator;
}

widget#tree option {
  color: @CHROME-TEXT;
}
widget#tree option:current {
  color: #000;
}

plaintext#editor { overflow:scroll-indicator !important; }